<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../../common/lib/jquery/jquery.min.js"></script>
    <script src="../../common/lib/jquery/jq-paginator.min.js"></script>
    <style>
        .pagination {
            display: inline-block;
            padding-left: 0;
            margin: 20px 0;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<ul id="demo4" class="pagination pagination4">
    <li class="prev" jp-role="prev" jp-data="5"><a href="javascript:void(0);">Previous</a></li>
    <li class="page active" jp-role="page" jp-data="6"><a href="javascript:void(0);"> 6 / 100 </a></li>
    <li class="next" jp-role="next" jp-data="7"><a href="javascript:void(0);">Next</a></li>
</ul>
<script>
    $("#demo4").jqPaginator({
        totalPages: 100,
        visiblePages: 1,
        currentPage: 1,
        prev: '<li><a href="javascript:void(0);"><img src="../../common/images/left.png" alt=""><\/a><\/li>',
        next: '<li class="next"><a href="javascript:void(0);"><img src="../../common/images/right.png" alt=""><\/a><\/li>',
        page: '<li class="page"><a href="javascript:void(0);"> {{page}} / {{totalPages}} <\/a><\/li>',
        onPageChange: function (n) {
            $("#demo4-text").html("当前第" + n + "页");
            console.log(n);
        }
    });
</script>
</body>
</html>
